import './MyList.scss'
import React, { Component } from 'react';
import Left from './Left'
import Right from './Right'
import {category_list,category_subcate} from '../../utils/api'
class MyList extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            listid:"",
            arr:[],
            subcategory:[]
        }
        // this.handleClick(item,index);
    }
    handleClick(item,index){
        category_subcate({id:item.id}).then((res)=>{
        //     this.setState((index)=>{
        // category_subcate({id:item.id}).then((res)=>{
        //     currentIndex:index,
        // }
        //     })
            // console.log(res.data.subcate.subcategory)
            this.setState({
                currentIndex:index,
            })
            this.setState([
                this.state.subcategory = res.data.subcate.subcategory
            ],()=>{
                // console.log(this.state.subcategory)
            })
        })
        
    }
    componentDidMount(){
        category_list().then((res)=>{
            // console.log(res.data)
            this.setState([
                this.state.arr = res.data.list,
                this.state.listid = this.state.arr[0].id
            ],()=>{
                category_subcate({id:this.state.listid}).then((res)=>{
                    // console.log(res.data)
                    this.setState([
                        this.state.subcategory = res.data.subcate.subcategory
                    ],()=>{
                        // console.log(this.state.subcategory)
                    })
                })

            })
        })

       
    }
    render() {
        return (
            <div className='myList'>
                <Left arr={this.state.arr} currentIndex={this.state.currentIndex} handleClick={this.handleClick.bind(this)}></Left>
                <Right subcategory={this.state.subcategory}></Right>
            </div>
        );
    }
}

export default MyList;